window.addEventListener('load', function () {
    // 取元素
    let tbody = document.querySelector('tbody')
    // 添加学员按钮
    let btnAddDialog = document.querySelector('.btnAddDialog')
    // 模态框确定按钮
    let btnaddmodal = document.querySelector('.btnaddmodal')
    // form---表单
    let form = document.querySelector('.modaladdform')
    // 省
    let provinceEle = document.querySelector('[name="province"]')
    // 市
    let cityEle = document.querySelector('[name="city"]')
    // 区
    let countyEle = document.querySelector('[name="county"]')











    // 封装函数
    function init() {
        axios({
            url: '/student/list'
        }).then(({ data: { data } }) => {
            //console.log(data);
            let htmlStr = ``
            data.forEach(function (value, index) {
                htmlStr += `<tr>
                                <th scope="row">${index + 1}</th>
                                <td>${value.name}</td>
                                <td>${value.age}</td>
                                <td>${value.sex}</td>
                                <td>${value.group}</td>
                                <td>${value.phone}</td>
                                <td>${value.salary}</td>
                                <td>${value.truesalary}</td>
                                <td>${value.province + value.city + value.county}</td>
                                <td>
                                <button type="button" class="btn btn-primary btn-sm">修改</button>
                                <button type="button" data-id='${value.id}' class="btn btn-danger btn-sm ">删除</button>
                                </td>
                            </tr>`
            })
            tbody.innerHTML = htmlStr
        })
    }
    // 重新渲染
    init()


    // 加载省的数据
    axios({
        url: '/geo/province'
    }).then(res => {
        //console.log(res);
        let htmlStr = ` <option selected value="">--省--</option>`
        res.data.forEach(function (value) {
            htmlStr += ` <option  value="${value}">--${value}--</option>`
        })
        provinceEle.innerHTML = htmlStr
    })


    // 加载省的 市数据
    provinceEle.addEventListener('change', function (value) {
        let pname = provinceEle.value
        cityEle.innerHTML = `<option selected value="">--市--</option>`
        countyEle.innerHTML = `<option selected value="">--县--</option>`
        // 判断如果没有省的名字 市就不做
        if (!pname) {

            return
        }


        // console.log(pname);
        // 发起市的数据请求
        axios({
            url: '/geo/city',
            params: {
                pname: pname
            }
        }).then(res => {
            //console.log(res);
            let htmlStr = `<option selected value="">--市--</option>`
            res.data.forEach(function (value) {
                htmlStr += `<option  value="${value}">--${value}--</option>`

            })
            cityEle.innerHTML = htmlStr
        })

    })
    // 加载省的 市 区的数据

    cityEle.addEventListener('change', function (value) {
        let cname = cityEle.value
        let pname = provinceEle.value
        countyEle.innerHTML = `<option selected value="">--县--</option>`
        // 判断没有市的名字 区就不显示
        if (!cname) {

            return
        }
        // console.log(pname);
        // console.log(cname);
        // 发起区的请求数据
        axios({
            url: '/geo/county',
            params: {
                pname: pname,
                cname: cname
            }
        }).then(res => {
            //console.log(res);
            let htmlStr = `<option selected value="">--县--</option>`
            res.data.forEach(function (value) {
                htmlStr += `<option value="${value}">--${value}--</option>`
            })
            countyEle.innerHTML = htmlStr
        })
    })


    // 2添加学员--只是弹出模态框
    btnAddDialog.addEventListener('click', function () {

        //    弹出模态框
        $('#addModal').modal('show')


    })

    // 2添加学员
    btnaddmodal.addEventListener('click', function (e) {
        // 阻止默认行为
        e.preventDefault()
        // 元素较多用formdata
        let formdata = new FormData(form)
        // 转对象
        let data = {}
        // 要去遍历看每一个值
        formdata.forEach(function (value, key) {
            data[key] = value
        })
        //console.log(data);
        // 不支持formdata 所以要转类类型
        axios({
            url: "/student/add",
            method: 'post',
            data: data
        }).then(res => {
            //console.log(res);
            if (res.data.code == 0) {
                // 提示
                toastr.success(res.data.message)
                // 关闭模态框
                $('#addModal').modal('hide')
                // 重新渲染
                init()
            }
        })





    })

    // 3删除
    tbody.addEventListener('click', function (e) {
        if (e.target.classList.contains("btn-danger")) {
            // 防止误删 询问一下
            if (confirm('请问是否删除')) {
                // 要id先存再取
                let id = e.target.dataset.id
                // 发起删除请求
                axios({
                    url: "/student/delete",
                    method: 'DELETE',
                    params: { id: id }
                }).then(res => {
                    //console.log(res);
                    if (res.data.code == 0) {
                        toastr.success(res.data.message)
                        // 重新渲染
                        init()
                    }
                })
            }
        }




    })





















})